<template>
<div class="datasource-wrapper content">
    <Spin size="large" fix v-if="loading"></Spin> <!-- 加载动画 -->
    <div v-if="!addShow">
        <div class="content-header">
            <div class="pull-left">
                <ul class="hearder-state">
                    <li class="title"><a @click="setStatus(-1)">所有数据源({{statusNums.total}})</a>  <span class="border-line" style="height: 22px;top: 5px;"> </span></li>
                    <li class="" ><a @click="setStatus(1)" :class="{'selected':selectStatus == 1}"  ><span class="round back-normal"></span> 正常({{statusNums.normalNum}})</a> <span class="border-line" style="height: 22px;top: 5px;"> </span> </li>
                    <li class="" ><a @click="setStatus(0)" :class="{'selected':selectStatus == 0}"><span class="round back-disable"></span> 禁用({{statusNums.disabledNum}})</a></li>
                </ul>
            </div>
            <div class="pull-right">
                <Input placeholder="数据源名称" class="search-input" prefix="ios-search" clearable v-model="searchText" @on-enter="queryDatasourceList"></Input>
                <span class="border-line m-l-10 m-r-5" style="height: 22px; top: 5px;"> </span>
                <a @click="onAddShow"><Icon type="md-add"/>新增数据源</a>
            </div>
        </div>
        <div class="datasource-table" ref="tableWrapper">
            <div ref="table">
                <Table :data="datasourceList" :columns="datasourceColumns" stripe :height="tableHeight"></Table>
            </div>
        </div>
        <div>
            <Page :total="statusNums.total" :page-size="page.pageSize" :current="page.pageNum"
                @on-change="onPageNumChange" @on-page-size-change="onPageSizeChange" size="small" show-elevator show-sizer></Page>
        </div>
    </div>
    <add-datasource ref="addDatasource" @refresh="refresh" v-if="addShow" @hide="onAddHide"></add-datasource>
    <edit-datasource ref="editDatasource" @refresh="refresh"></edit-datasource>
    <edit-columns ref="editColumnsCompt" @refresh="refresh"></edit-columns>
</div>
</template>

<script>
import util         from 'util'
import getData      from 'getData'

import AddDatasource from './add-datasource/add-datasource'
import EditDatasource from './edit-datasource/edit-datasource'
import EditColumns from './edit-columns/edit-columns.vue'

export default {

    components: {
        AddDatasource, EditDatasource, EditColumns
    },
    data () {
        return {
            loading: false,
            addShow: false,
            searchText: '',
            tableHeight: 0,
            total: 0,
            statusNums: {
                total: 0,
                normalNum: 0,
                disabledNum: 0,
            },
            selectStatus: -1,

            page: {
                pageNum: 1,
                pageSize: 20,
            },

            datasourceList: [],
            datasourceColumns: [
                {
                    title: '状态',
                    key: 'status',
                    width: 80,
                    align: 'center',
                    fixed: 'left',
                    render: (h, params) =>{
                        if(params.row.status == 0){
                            return (<i class="round back-disable"></i> )
                        }else if(params.row.status == 1){
                            return (<i class="round back-normal"></i> )
                        }
                    }
                },
                {
                    title: '数据源名称',
                    key: 'datasourceName',
                    fixed: 'left',
                    minWidth: 220,
                    tooltip: true,
                    render: (h, params) =>{
                        var row = params.row;
                        return <a on-click={()=> {this.onDatasourceClick(row)}}>{params.row.datasourceName}</a>
                    }
                },
                {
                    title: '类型',
                    key: 'datasourceType',
                    width: 120
                },
                {
                    title: '创建时间',
                    key: 'createTime',
                    width: 180,
                    render: (h, params) => {
                        const temp = util.util.formatDate(params.row.createTime, 3);
                        return (
                            <div>
                            {temp}
                            </div>
                        )
                    }
                },
                {
                    title: '描述',
                    key: 'remark',
                    minWidth: 100,
                    tooltip: true
                },
                {
                    title: ' ',
                    key: 'operations',
                    fixed: 'right',
                    width: 160,
                    render: (h, params) => {
                        const row = params.row;
                        var statusBtnText;
                        var statusBtnIcon;
                        if (row.status == 0) {
                            statusBtnText = '启用';
                            statusBtnIcon = 'zlstbd-icon-unlock';
                        } else {
                            statusBtnText = '禁用';
                            statusBtnIcon = 'zlstbd-icon-disable';
                        }
                        // <poptip content="content" placement="bottom-end" transfer popper-class="operation-poptip">
                        //                 <a title="更多"><i class="zlstbd-icon-more"></i></a>
                        //                 <div slot="content" class="poptip-content">
                        //                     <ul>
                        //                         <li on-click="edit">
                        //                             <p><i class="zlstbd-icon-delete m-r-5"></i>操作一</p>
                        //                         </li>
                        //                         <li on-click="edit">
                        //                             <p><i class="zlstbd-icon-delete m-r-5"></i>操作二</p>
                        //                         </li>
                        //                         <li on-click="edit">
                        //                             <p><i class="zlstbd-icon-delete m-r-5"></i>操作三</p>
                        //                         </li>
                        //                     </ul>
                        //                 </div>
                        //             </poptip>
                        return (<div class="table-column-btn">
                                <div>
                                    <tooltip content="编辑" placement="bottom" transfer theme="light">
                                        <a on-click={()=>{this.onEditClick(row)}}><i class="zlstbd-icon-edit"></i></a>
                                    </tooltip>
                                    <tooltip content="编辑列信息" transfer placement="bottom" theme="light">
                                        <a on-click={()=> {this.editColumns(row)}}><i class="zlstbd-icon-rename" ></i></a>
                                    </tooltip>
                                    <tooltip content={statusBtnText} placement="bottom" transfer theme="light">
                                        <a on-click={()=>{this.onStatusChangeClick(row)}}><i class={statusBtnIcon}></i></a>
                                    </tooltip>
                                    <tooltip content="删除" placement="bottom" transfer theme="light">
                                        <a on-click={()=>{this.onDeleteClick(row)}}><i class="zlstbd-icon-delete"></i></a>
                                    </tooltip>
                                </div>
                            </div>);
                    }
                }
            ],
        }
    },
    watch: {
        datasourceList: {
            deep: true,
            handler(val) {
                this.setTableHeight();
            }
        }
    },
    methods: {
        refresh() {
            this.queryDatasourceList();
            this.countStatusNums();
        },
        queryDatasourceList() {
            var reqData = this.page;
            this.page.params = {
                status: this.selectStatus,
                datasourceName: this.searchText
            }
            this.loading = true;
            getData.post('queryDatasourceList', reqData).then(res => {
                this.loading = false;
                if (res.status == 200 && res.data.code == '000') {
                    this.datasourceList = res.data.data;
                } else {
                    this.$Message.error('查询数据失败，请检查网络或联系管理员！');
                    this.datasourceList = [];
                    console.error(res);
                }
            });
        },
        countStatusNums() {
            getData.get('countDatasourceStatusNums').then(res => {
                if (res.status == 200 && res.data.code == '000') {
                    this.statusNums = res.data.data;
                } else {
                    this.$Message.error('查询数据失败，请检查网络或联系管理员！');
                    console.error(res);
                }
            });
        },
        onAddShow() {
            this.addShow = true;
        },
        onAddHide(refresh) {
            this.addShow = false;
            if (refresh) {
                this.refresh();
            }
        },
        editColumns(datasource) {
            this.$refs.editColumnsCompt.show(datasource.datasourceId);
        },
        onEditClick(datasource) {
            this.$refs.editDatasource.show(datasource);
        },
        onStatusChangeClick(datasource) {
            var title = '数据源';
            var reqData = util.util.cloneObj(datasource);
            if (datasource.status == 1) {
                title = '禁用' + title;
                reqData.status = 0;
            }
            if (datasource.status == 0) {
                title = '启用' + title;
                reqData.status = 1;
            }
            this.$Modal.confirm({
                title: title,
                content: '确定' + title + ' ' + datasource.datasourceName + ' ？',
                onOk: ()=> {
                    getData.post('saveDatasource', reqData).then(res => {
                        if (res.status == 200  && res.data.code == '000') {
                            this.$Message.success(title + '成功！');
                            this.refresh();
                        } else {
                            this.$Message.error(title + '失败，请检查网络或联系管理员！');
                            console.error(res);
                        }
                    })
                }
            })
        },
        onDeleteClick(datasource) {
            this.$Modal.confirm({
                title: '删除数据源',
                content: '确定删除数据源 ' + datasource.datasourceName + ' ？',
                onOk: ()=> {
                    getData.get('deleteDatasource', {}, datasource.datasourceId).then(res => {
                        if (res.status == 200 && res.data.code == '000') {
                            this.$Message.success('删除数据源' + datasource.datasourceName + '成功！');
                            this.refresh();
                        } else if (res.status == 200) {
                            this.$Message.warning('删除数据源失败：' + res.data.errorMsg);
                        } else {
                            this.$Message.error('删除数据源失败，请检查网络或联系管理员！');
                            console.error(res);
                        }
                    })
                }
            })
        },
        onDatasourceClick(datasource) {
            this.$router.push({
                name: 'datasource-detail',
                params: datasource
            })
        },
        onPageNumChange(pageNum) {
            this.page.pageNum = pageNum;
            this.queryDatasourceList();
        },
        onPageSizeChange(pageSize) {
            this.page.pageSize = pageSize;
            this.queryDatasourceList();
        },
        setStatus(status) {
            this.selectStatus = status;
            this.page.pageNum = 1;
            this.queryDatasourceList();
            if (status == -1) {
                this.countStatusNums();
            }
        },
        setTableHeight() {
            this.tableHeight = 0;
            this.$nextTick(() => {
                var tableHeight = this.$refs.table.offsetHeight;
                var tableWrapperHeight = this.$refs.tableWrapper.offsetHeight;
                if (tableHeight > tableWrapperHeight) {
                    this.tableHeight = tableWrapperHeight;
                }
            })
        }
    },

    mounted () {
        this.refresh();
    },

    beforeRouteLeave (to, from, next) {
        this.addShow = false;
        next();
    },
}
</script>

<style lang="less">
.datasource-wrapper {
    position: relative;
    height: calc(~"100vh - 88px");
    .datasource-table {
        max-height: calc(~"100vh - 176px");
        overflow: auto;
    }
}
</style>
